<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="./style.css">
    <title>About - 30 seconds of code</title>
    <meta charset="utf-8">
    <meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.">
    <meta name="keywords" content="javascript, snippets, code, programming">
    <meta name="author" content="Angelos Chalaris (chalarangelo@gmail.com)">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#111">
    <meta property="og:title" content="30 seconds of code">
    <meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less." />
    <meta property="og:type" content="website" /><meta property="og:image" content="https://30secondsofcode.org/logos/logo_512.png">
    <link rel="icon" type="image/png" href="./logos/logo_128.png"><link rel="manifest" href="manifest.json">
    <script>
      const search = (node) => {
        if (node.value.toLowerCase().trim() === '') {
          document.querySelector('nav').querySelectorAll('li > a').forEach(x => x.style.display = '');
          document.querySelector('nav').querySelectorAll('h4:not(.static-link)').forEach(x => x.classList = 'collapse');
          return;
        }
        let matchingTags = [];
        Array.from(document.querySelector('nav').querySelectorAll('li')).forEach(x => {
          let data = [x.textContent.toLowerCase(), ...x.querySelector('a').getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1));
          if (data.includes(true)) {
            x.style.display = '';
            matchingTags.push(x.querySelector('a').getAttribute('tags').split(',')[0]);
          }
          else x.style.display = 'none';
        });
        Array.from(document.querySelector('nav').querySelectorAll('h4:not(.static-link)')).forEach(x => {
          x.classList = matchingTags.includes(x.textContent.toLowerCase()) ? 'collapse toggled' : 'collapse';
        })
      }
      function scrollToTop() {
        const c = document.querySelector('.card-container').scrollTop;
        if (c > 0) {
          window.requestAnimationFrame(scrollToTop);
          document.querySelector('.card-container').scrollTo(0, c - c / 4);
        }
      };
      function scrollTo(element, to, id, duration) {
        if (duration <= 0) return;
        var difference = to - element.scrollTop;
        var perTick = difference / duration * 40;

        setTimeout(function () {
          element.scrollTop = element.scrollTop + perTick;
          if (element.scrollTop === to) {
            window.location.href = "#" + id;
            return;
          }
          scrollTo(element, to, id, duration - 40);
        }, 40);
      };
      function loader() {
        registerClickListener();
        if (window.innerWidth >= '768')
          document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
        else
          document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
      }
      function registerClickListener() {
        document.addEventListener('click', function (event) {
          if (event.target.classList.contains('collapse')) {
            event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled';
          }
          else if (event.target.classList.contains('menu-button')) {
            document.querySelector('nav').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
            document.querySelector('[type="search"]').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
            event.target.classList = event.target.classList.contains('toggled') ? 'menu-button' : 'menu-button toggled';
          }
          else if (!document.querySelector('nav').contains(event.target) && !document.querySelector('[type="search"]').contains(event.target) && window.innerWidth < '768') {
            document.querySelector('nav').classList = '';
            document.querySelector('[type="search"]').classList = '';
            document.querySelector('.menu-button').classList = 'menu-button';
          }
          else if (event.target.classList.contains('social')) {
            if (event.target.classList.contains('fb')) {
              window.location = "https://www.facebook.com/30secondsofcode";
            }
            else if (event.target.classList.contains('instagram')) {
              window.location = "https://www.instagram.com/30secondsofcode";
            }
            else if (event.target.classList.contains('twitter')) {
              window.location = "https://twitter.com/30secondsofcode";
            }
          }
          else if (event.target.classList.contains('copy-button')) {
            const text = event.target.parentElement.parentElement.querySelector(':not(pre) + pre').textContent;
            const textArea = document.createElement("textarea");
            textArea.value = text.trim();
            document.body.appendChild(textArea);
            textArea.select();
            document.execCommand("Copy");
            document.body.removeChild(textArea);
            let tst = document.createElement('div');
            tst.classList = 'toast';
            tst.innerHTML = 'Snippet copied to clipboard!';
            document.body.appendChild(tst);
            setTimeout(function () {
              tst.style.opacity = 0;
              setTimeout(function () {
                document.body.removeChild(tst);
              }, 300);
            }, 1700);
          }
        }, false);
      }
    </script>
  </head>
  <body onload="loader()">
    <a href="https://github.com/30-seconds/30-seconds-of-code" 
      class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#009688; color:#fff; position: fixed; top: 0; border: 0; right: 0; z-index: 1000"
        aria-hidden="true">
        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
        <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
          fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
        <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
          fill="currentColor" class="octo-body"></path>
      </svg></a>
    <button class="menu-button"></button>
    <header>
      <h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo" /><span id="title">&nbsp;30
            seconds of code</span>
          <small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small>
        </a></h1>
    </header>
    <div class="container card-container">
      <input class="search" type="search" id="searchInput" onkeyup="search(this)" placeholder="Search..." aria-label="Snippet search">
      <nav>
        $nav-menu-data
        <h4 class="static-link"><a href="./archive">Archive</a></h4>
        <h4 class="static-link"><a href="./glossary">Glossary</a></h4>
        <h4 class="static-link"><a href="./contributing">Contributing</a></h4>
        <h4 class="static-link"><a href="./about">About</a></h4>
        <div><button class="social fb"></button><button class="social instagram"></button><button class="social twitter"></button></div>
      </nav>
      <main class="col-centered">
        <span id="top"><br><br></span>
        <h2 class="category-name">Our philosophy</h2>
        <p style="text-align: justify">The core goal of <strong>30 seconds of code</strong> is to provide a quality resource for beginner and advanced JavaScript developers alike. We want to help improve the JavaScript ecosystem, by lowering the barrier of entry for newcomers and help seasoned veterans pick up new tricks and remember old ones. In order to achieve this, we have collected hundreds of snippets that can be of use in a wide range of situations. We welcome new contributors and we like fresh ideas, as long as the code is short and easy to grasp in about 30 seconds. The only catch, if you may, is that a few of our snippets are not perfectly optimized for large, enterprise applications and they might not be deemed production-ready.</p><br />
        <h2 class="category-name">Related projects</h2>
        <p style="text-align: justify">The idea behind <strong>30 seconds of code</strong> has inspired some people to create similar collections in other programming languages and environments. Here are the ones we like the most:</p>
        <ul>
          <li><a href="https://30-seconds.github.io/30-seconds-of-css/">30 seconds of CSS</a></li>
          <li><a href="http://30secondsofinterviews.org/">30 seconds of Interviews</a> by <strong>fejes713</strong></li>
          <li><a href="https://github.com/kriadmin/30-seconds-of-python-code">30 seconds of Python</a> <em>(unofficial)</em></li>
          <li><a href="https://github.com/appzcoder/30-seconds-of-php-code">30 seconds of PHP</a> <em>(unofficial)</em></li>
        </ul><br />
        <h2 class="category-name">Maintainers</h2>
          <div class="flex-row">
            <div class="flex-item">
              <div class="card fluid contributor">
                <img class="section media" src="https://github.com/Chalarangelo.png" alt="chalarangelo" />
                <a href="https://github.com/Chalarangelo" class="section button">Angelos Chalaris</a>
              </div>
            </div>
            <div class="flex-item">
              <div class="card fluid contributor">
                <img class="section media" src="https://github.com/fejes713.png" width="460px" height="460px" alt="fejes713" />
                <a href="https://github.com/fejes713" class="section button">Stefan Fejes</a>
              </div>
            </div>
            <div class="flex-item">
              <div class="card fluid contributor">
                <img class="section media" src="https://github.com/flxwu.png" alt="flxwu" />
                <a href="https://github.com/flxwu" class="section button">Felix Wu</a>
              </div>
            </div>
            <div class="flex-item">
              <div class="card fluid contributor">
                <img class="section media" src="https://github.com/atomiks.png" alt="atomiks" />
                <a href="https://github.com/atomiks" class="section button">atomiks</a>
              </div>
            </div>
            <div class="flex-item">
              <div class="card fluid contributor">
                <img class="section media" src="https://github.com/skatcat31.png" alt="skatcat31" />
                <a href="https://github.com/skatcat31" class="section button">Robert Mennell</a>
              </div>
            </div>
          </div>
        <h2 class="category-name">Past maintainers</h2>
        <div class="flex-row">
          <div class="flex-item">
            <div class="card fluid contributor">
              <img class="section media" src="https://github.com/kingdavidmartins.png" alt="kingdavidmartins" />
              <a href="https://github.com/kingdavidmartins" class="section button">King David Martins</a>
            </div>
          </div>
          <div class="flex-item">
            <div class="card fluid contributor">
              <img class="section media" src="https://github.com/elderhsouza.png" alt="elderhsouza" />
              <a href="https://github.com/elderhsouza" class="section button">Elder Henrique Souza</a>
            </div>
          </div>
          <div class="flex-item">
            <div class="card fluid contributor">
              <img class="section media" src="https://github.com/iamsoorena.png" alt="iamsoorena" />
              <a href="https://github.com/iamsoorena" class="section button">Soorena</a>
            </div>
          </div>
        </div><h2 class="category-name">License</h2>
        <p style="text-align: justify">In order for <strong>30 seconds of code</strong> to be as accessible and useful as
          possible, all of the snippets in the collection are licensed under the <a href="https://github.com/30-seconds/30-seconds-of-code/blob/master/LICENSE">CC0-1.0
            License</a>, meaning they are absolutely free to use in any project you like. If you like what we do, you can
          always credit us, but that is not mandatory.</p><br />
      </main>
      <footer class="col-full-width container">
        <div class="col-centered">
          <p style="display: inline-block;"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/30-seconds/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a>
            license.<br>Logos made by <a href="https://github.com/Chalarangelo">Angelos Chalaris</a> and ribbon made by <a
              href="https://github.com/tholman/github-corners">Tim Holman</a> are licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a>
            license.<br>Sponsored by <img src="https://30secondsofcode.org/sponsors/DO_Logo_icon_blue.svg" style="vertical-align: sub; padding-right: 2px; padding-left: 2px;"
              width="20px" height="20px" alt="DigitalOcean"><a href="https://www.digitalocean.com"><span style="color:#0080ff">DigitalOcean</span></a></p>
          <br />
          <p style="display: inline-block;"><a href="./about">About</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="./contributing">Contributing</a>&nbsp;&nbsp;&nbsp;&nbsp;<a
              href="./archive">Archive</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="./glossary">Glossary</a></p>
        </div>
      </footer>
      <a class="scroll-to-top" href="#top"></a></div>
      </div>
      </body>
      
      </html>
